<template>
  <div class="backgroundset">
    <el-table
      border
      ref="multipleTable"
      :data="evaluationlist"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
      :header-cell-style="{
        background: '#D8E4F0',
        color: '#2A303B',
        fontWeight: '500',
      }"
      v-loading="loading"
    >
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="学校名称">
        <template slot-scope="scope">
          {{ scope.row.schoolName || "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="参考人数">
        <template slot-scope="scope">
          {{ scope.row.studentCount || "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="分配教师数">
        <template slot-scope="scope">
          {{ scope.row.assignedTeachers || "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="分配题组">
        <template slot-scope="scope">
          {{ scope.row.questionGroup || "-" }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="仲裁设置">
                <template slot-scope="scope">
                    {{ scope.row.createdTime ? scope.row.createdTime : '-' }}
                </template>
                </el-table-column> -->
      <el-table-column align="center" label="总分配数">
        <template slot-scope="scope">
          {{ scope.row.totalAssignments ? scope.row.totalAssignments : "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="待分配数">
        <template slot-scope="scope">
          {{
            scope.row.pendingAssignments ? scope.row.pendingAssignments : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="已分配量">
        <template slot-scope="scope">
          {{
            scope.row.completedAssignments
              ? scope.row.completedAssignments
              : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="已评阅数">
        <template slot-scope="scope">
          {{ scope.row.reviewedCount ? scope.row.reviewedCount : "-" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="剩余数量">
        <template slot-scope="scope">
          {{
            scope.row.remainingCount ? scope.row.remainingCount : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <div
            style="display: flex; text-decoration: underline"
            class="scopednr"
          >
            <b @click="taskshooltap(scope.row)">学校分配情况</b>
            <b
              v-hasRole="['admin']"
              style="color: #ec555a"
              v-if="scope.row.status == 0"
              @click="cycontactmark(scope.row.id)"
              >参与联阅</b
            >
            <b
              v-hasRole="['admin']"
              style="color: #ec555a"
              v-else
              @click="nocycontactmark(scope.row.id)"
              >不参与联阅</b
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-bottom">
      <div class="examfooter">
        <div class="examFootercontent">
          <div>
            <span class="totaldata"
              >共<i>{{ total }}</i
              >条数据,已选{{ multipleSelection.length }}条</span
            >
            <el-button
              style="
                background: #1a48db;
                color: #fff;
                margin-left: 20px;
                border-color: #1a48db;
              "
              @click="exportimportExcelschool"
              >导出校级分配</el-button
            >
            <el-button
              style="
                background: #1a48db;
                color: #fff;
                margin-left: 20px;
                border-color: #1a48db;
              "
              @click="exportimportExcelteacher"
              >导出师级分配</el-button
            >
            <el-button
              style="
                background: #1a48db;
                color: #fff;
                margin-left: 20px;
                border-color: #1a48db;
              "
              @click="addtateobjective"
              v-hasRole="['admin']"
              >过滤未上传</el-button
            >
            <el-button
              style="
                background: #1a48db;
                color: #fff;
                margin-left: 20px;
                border-color: #1a48db;
              "
              @click="autotasktask"
              v-hasRole="['admin']"
              >自动分配任务</el-button
            >
            <el-button
              style="
                background: #ec555a;
                color: #fff;
                margin-left: 20px;
                border-color: #ec555a;
              "
              @click="batchnocontactmark"
              v-hasRole="['admin']"
              >批量不联阅</el-button
            >
          </div>
          <div>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="schooltassklisttab"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getschoolTask,
  batchNotreadtogether,
  taskschoolAssignment,
} from "@/api/task/task.js";
import { scanQuestionCardSchoolListSchool } from "@/api/xmgl/tkcx";

export default {
  props: ["examsubjectid", "xmxx"],
  data() {
    return {
      evaluationlist: [],
      total: 0,
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 15,
      },

      loading: false,
    };
  },
  mounted() {
    this.loading = true;
    if (!this.$auth.hasRole("admin")) {
      scanQuestionCardSchoolListSchool({
        examId: this.xmxx.id,
      }).then((res) => {
        this.queryParams.schoolId = res.rows.filter((item) => {
          return this.$store.state.user.deptId == item.schoolId;
        })[0].id;
        this.schooltassklisttab();
      });
    } else {
      this.schooltassklisttab();
    }
  },
  methods: {
    //过滤未上传
    addtateobjective() {
      let obj = {
        examId: sessionStorage.getItem("examSubjectId"),
        filtersUpload: 1,
      };
      getschoolTask(obj).then((res) => {
        if (res.code == 200) {
          this.evaluationlist = res.rows;
          this.total = res.total;
        }
      });
    },
    // 一键分配
    autotasktask() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要分配的数据",
          type: "warning",
        });
        return;
      }
      let ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      taskschoolAssignment(ids)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "warning",
              message: "分配成功",
            });
            this.schooltassklisttab();
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    taskshooltap(con) {
      sessionStorage.setItem("taskshooltap", JSON.stringify(con));
      this.$emit("taskshooltap", "Taskteacher");
    },
    schooltassklisttab() {
      let obj = {
        examId: sessionStorage.getItem("examSubjectId"),
        ...this.queryParams,
      };
      this.loading = true;
      getschoolTask(obj)
        .then((res) => {
          console.info("objres", res);
          if (res.code == 200) {
            this.evaluationlist = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //参与联考
    cycontactmark(id) {
      let obj = {
        ids: [id],
        status: 1,
      };
      batchNotreadtogether(obj).then((res) => {
        if (res.code == 200) {
          this.schooltassklisttab();
        }
      });
    },
    //不参与联考
    nocycontactmark(id) {
      this.$modal.confirm("确认不参与联阅后，请点击任务总览重新自动分配任务！").then(() => {
        let obj = {
          ids: [id],
          status: 0,
        };
        batchNotreadtogether(obj).then((res) => {
          if (res.code == 200) {
            this.schooltassklisttab();
          }
        });
      });
    },
    //批量不联阅
    batchnocontactmark() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请选择批量不联阅的数据");
        return;
      }
      // 3. 提取所有任务的 id
      const ids = this.multipleSelection.map((item) => item.id);
      let obj = {
        ids: ids,
        status: 1,
      };
      batchNotreadtogether(obj).then((res) => {
        if (res.code == 200) {
          this.schooltassklisttab();
        }
      });
    },
    // 导出
    exportimportExcelschool() {
      let queryparams = {
        examId: sessionStorage.getItem("examSubjectId"),
      };
      this.download(
        "/task/school/stats/export",
        {
          ...queryparams,
        },
        `学校分配情况_${this.xmxx.examName}_${this.xmxx.startTime}.xlsx`
      );
    },
    exportimportExcelteacher() {
      let queryparams = {
        examId: sessionStorage.getItem("examSubjectId"),
      };
      this.download(
        "/task/teacher/stats/export",
        {
          ...queryparams,
        },
        `教师分配情况_${this.xmxx.examName}_${this.xmxx.startTime}.xlsx`
      );
    },
  },
};
</script>

<style scoped>
.backgroundset {
  padding: 0 15px 15px 15px;
  background: #fff;
}
.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.34);
  border-right: none;
  border-bottom: none;
}
/* 自定义表格内部元素的样式 */
.custom-table >>> .el-table__header-wrapper th {
  background-color: #e8f0fa;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal;
}
.custom-table >>> .el-table th.el-table__cell.is-leaf,
.custom-table >>> .el-table td.el-table__cell {
  border-bottom: none;
}
.custom-table >>> .el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-right: solid 1px rgba(216, 228, 240, 0.5);
  font-size: 14px;
}
.el-table .warning-row {
  background: #ffffff;
}
.el-table .success-row {
  background: #d8e4f0;
}
.el-table .el-table__cell {
  padding: 8px 0;
}
.examfooter {
  width: 100%;
  height: 54px;
  left: 0;
  bottom: 0;
}

.examFootercontent {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.examFootercontent .totaldata {
  font-size: 14px;
}

.examFootercontent .totaldata i {
  display: inline-block;
  color: #295cff;
  font-style: normal;
  line-height: 54px;
  padding: 0 3px;
}
.taskredborder {
  display: inline-block;
  width: 62px;
  height: 22px;
  background: #ec555a0f;
  border: 1px solid #ec555a80;
  border-radius: 4px;
  color: #ec555a;
  font-size: 14px;
  font-weight: normal;
}
.scopednr b {
  font-weight: normal;
  margin: 0 10px;
  color: #1a48db;
  text-decoration: underline;
  cursor: pointer;
}
.scopednr b.hover {
  color: #ec555a;
}
.autoquestion,
.avgquestion,
.efficiencyquestion {
  display: inline-block;
  width: 76px;
  height: 22px;
  font-size: 14px;
  border-radius: 4px;
}
.autoquestion {
  background: #1a48db0f;
  border: 1px solid #1a48db80;
  color: #1a48db;
}
.avgquestion {
  background: #2f44890f;
  border: 1px solid #2f448980;
  color: #2f4489;
}
.efficiencyquestion {
  background: #ca61270f;
  border: 1px solid #ca612780;
  color: #ca6127;
}
</style>